<template>
  <section class="app-container">
    <div class="app-container__body">
      <el-form ref="bookForm" label-width="130px" v-loading="loading">
        <el-row>
          <el-col :span="18">
            <h3 class="block-title">基本信息</h3>
            <el-form-item label="书名" required :class="{error: validation.hasError('bookForm.title')}">
              <el-input v-model="bookForm.title" :max-length="50"></el-input>
              <span class="v-message">{{ validation.firstError('bookForm.title') }}</span>
            </el-form-item>
            <el-form-item label="作者" required :class="{error: validation.hasError('bookForm.author')}">
              <el-input v-model="bookForm.author" :max-length="50"></el-input>
              <span class="v-message">{{ validation.firstError('bookForm.author') }}</span>
            </el-form-item>
            <el-form-item label="推荐语" required :class="{error: validation.hasError('bookForm.recommendation')}">
              <el-input type="textarea" v-model="bookForm.recommendation" :rows="5"></el-input>
              <span class="v-message">{{ validation.firstError('bookForm.recommendation') }}</span>
            </el-form-item>
            <el-form-item label="封面" required :class="{error: validation.hasError('bookForm.cover')}">
              <el-upload class="cover-uploader"
                         :action="uploadAction"
                         :on-success="handleCoverSuccess"
                         :before-upload="beforeCoverUpload">
                <p class="upload_modify" v-if="bookForm.cover"><span>修改</span></p>
                <img ref="bookCover" v-if="bookForm.cover" :src="bookForm.cover" class="cover-image" />
                <i v-else class="el-icon-plus cover-uploader-icon"></i>
                <p class="default_tips">详情页封面<br/>(尺寸178*258)</p>
              </el-upload>
              <span class="default_tips">建议图片尺寸178*258像素，JPG、PNG格式，小于500k</span>
              <span class="v-message">{{ validation.firstError('bookForm.cover') }}</span>
            </el-form-item>
            <el-form-item label="推荐广告位">
              <el-upload class="banner-uploader"
                         :action="uploadAction"
                         :on-success="handleBannerSuccess"
                         :before-upload="beforeBannerUpload">
                <p class="upload_modify" v-if="bookForm.bannerImage"><span>修改</span></p>
                <img v-if="bookForm.bannerImage" :src="bookForm.bannerImage" class="banner-image" />
                <i v-else class="el-icon-plus banner-uploader-icon"></i>
                <p class="default_tips">建议图片尺寸644*260像素，JPG、PNG格式，小于500k</p>
              </el-upload>
            </el-form-item>
            <el-form-item label="音频文件" required :class="{error: validation.hasError('voiceList')}">
              <div class="clearfix">
                <el-upload :class="['voice-uploader',{'is-active':baseUtil.isNotBlank(voiceList[0].voicePath)}]" :show-file-list="false" :action="uploadVoiceAction" :on-progress="voiceProgress" :on-success="voiceDDSuccess" :before-upload="voiceDDBefore">
                  <el-button class="voice-btn" type="cyan"><i :class="{'el-icon-plus':baseUtil.isBlank(voiceList[0].voicePath),'el-icon-check':baseUtil.isNotBlank(voiceList[0].voicePath)}"></i>{{baseUtil.isBlank(voiceList[0].voicePath)?'上传导读音频':'重新上传导读'}}</el-button>
                </el-upload>
                <el-upload disabled :class="['voice-uploader',{'is-active':baseUtil.isNotBlank(voiceList[1].voicePath)}]" :show-file-list="false" :action="uploadVoiceAction" :on-progress="voiceProgress" :on-success="voiceJDSuccess" :before-upload="beforeVoiceUpload">
                  <el-button disabled class="voice-btn" type="cyan"><i :class="{'el-icon-plus':baseUtil.isBlank(voiceList[1].voicePath),'el-icon-check':baseUtil.isNotBlank(voiceList[1].voicePath)}"></i>{{baseUtil.isBlank(voiceList[1].voicePath)?'上传精读音频':'重新上传精读'}}</el-button>
                </el-upload>
                <el-upload disabled :class="['voice-uploader',{'is-active':baseUtil.isNotBlank(voiceList[2].voicePath)}]" :show-file-list="false" :action="uploadVoiceAction" :on-progress="voiceProgress" :on-success="voiceQBSuccess" :before-upload="beforeVoiceUpload">
                  <el-button disabled class="voice-btn" type="cyan"><i :class="{'el-icon-plus':baseUtil.isBlank(voiceList[2].voicePath),'el-icon-check':baseUtil.isNotBlank(voiceList[2].voicePath)}"></i>{{baseUtil.isBlank(voiceList[2].voicePath)?'上传整本音频':'重新上传整本'}}</el-button>
                </el-upload>
                <br/>
                <span class="default_tips">建议音频文件为mp3、wmv格式，小于10M</span>
                <span class="v-message">{{ validation.firstError('voiceList') }}</span>
                <div class="voice-upload-list">
                  <p v-for="(voice,vIndex) in voiceFileList" :key="vIndex" v-if="voice.visible">
                    <span class="fileName">{{voice.name}}</span>
                    <span class="fileProgress"><el-progress :percentage="voice.progress" color="#2BB89A"></el-progress></span>
                    <span class="fileDel"><i class="el-icon-close" @click="voiceRemove(voice,vIndex)"></i></span>
                  </p>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="内容介绍" required :class="{error: validation.hasError('bookForm.content')}">
              <editor :content.sync="bookForm.content"></editor>
              <span class="default_tips" >编辑器中图片大小不得超过2M,否则无法上传</span>
              <span class="v-message">{{ validation.firstError('bookForm.content') }}</span>
            </el-form-item>
            <el-form-item label="售卖设置" :class="{error: validation.hasError('bookForm.price')}">
              <el-radio v-model="bookForm.isFree" :label="1">免费</el-radio>
              <el-radio v-model="bookForm.isFree" disabled :label="0">付费</el-radio>
              <span style="padding-left: 20px" v-show="bookForm.isFree == 0">价格 <el-input-number v-model="bookForm.price" :controls="false" :precision="2" style="width:100px;"/> 元</span>
              <span class="v-message">{{ validation.firstError('bookForm.price') }}</span>
            </el-form-item>
            <!--<el-form-item label="出版时间" required :class="{error: validation.hasError('bookForm.publishDate')}">-->
              <!--<el-date-picker v-model="bookForm.publishDate" type="date" placeholder="选择出版日期"></el-date-picker>-->
              <!--<span class="v-message">{{ validation.firstError('bookForm.publishDate') }}</span>-->
            <!--</el-form-item>-->
            <el-form-item label="选择分类" required :class="['select-category-list',{error: validation.hasError('bookForm.bookCategory')}]">
              <el-popover placement="bottom-start" trigger="click" v-for="(category,cIndex) in categoryList" :key="cIndex" v-model="category.visible">
                <el-radio-group class="sub-category-group" v-model="bookForm.bookCategory" @change="category.visible=false" style="display:inline-block;max-width:450px;">
                  <el-radio-button class="sub-category-item" v-for="(item,itemIndex) in category.categoryList" :key="itemIndex" :label="item" >{{item.name}}</el-radio-button>
                </el-radio-group>
                <el-button :class="['category-item',{'is-active':bookForm.bookCategory != null && category.id==bookForm.bookCategory.parentId}]" slot="reference" @click="onCategoryClick(category)" :label="category.id">{{category.name}}</el-button>
              </el-popover>
              <div class="v-message">{{ validation.firstError('bookForm.bookCategory') }}</div>
              <div class="selected-category" v-if="bookForm.bookCategory != null"><span>{{bookForm.bookCategory.name}}</span></div>
            </el-form-item>
            <h3 class="block-title">上架设置</h3>
            <el-form-item :class="{error: validation.hasError('bookForm.saleTime')}">
              <div class="sale-type">
                <el-radio v-model="bookForm.saleType" :label="0" @click.native="bookForm.saleTime = ''">暂不上架</el-radio>
              </div>
              <div class="sale-type">
                <el-radio v-model="bookForm.saleType" :label="1" @click.native="bookForm.saleTime = ''">立即上架</el-radio>
              </div>
              <div class="sale-type">
                <el-radio v-model="bookForm.saleType" :label="2">定时上架</el-radio>
                <el-date-picker v-model="bookForm.saleTime" :disabled="bookForm.saleType != 2" type="datetime" placeholder="选择上架时间" style="margin-left: 20px"></el-date-picker>
                <span class="v-message">{{ validation.firstError('bookForm.saleTime') }}</span>
              </div>
            </el-form-item>
            <h3 class="block-title">是否一键分发</h3>
            <el-form-item >
              <el-radio  v-model="bookForm.isDistribute"  :label="1">是</el-radio>
              <el-radio  v-model="bookForm.isDistribute" :label="0">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="position: relative">
            <!-- 右侧 获取海报按钮 -->
            <div class="poster-print-btn__wrapper" v-show="posterBtnVisible">
              <div class="poster-print-btn__body">
                <el-button type="text" class="poster-print-btn" @click="onGetQrcodeAndPoster">一键获取<br/>听书二维码<br/>和专属海报</el-button>
              </div>
            </div>
            <div class="poster-print-box" ref="posterPrint">
              <!-- 海报打印 -->
              <div class="pop_intro">{{bookForm.recommendation}}</div>
              <div class="pop_img">
              		<img :src="bookForm.dataCover" />
              		<div><span>《{{bookForm.title}}》</span></div>
              </div>
              <div class="pop_qrcode">
             			<img :src="bookForm.dataQrcode" />
              </div>
              <!--<p>{{bookForm.author}}</p>-->
            </div>
          </el-col>
        </el-row>
        <el-row class="foot-btns">
          <el-button @click="onCancel"> 取 消 </el-button>
          <el-button @click="onSaveDraft" v-if="draftBtnVisible"> 暂存草稿箱 </el-button>
          <el-button type="cyan" @click="onPublish"> 保 存 </el-button>
        </el-row>
      </el-form>
    </div>
    <el-dialog title="听书二维码和专属海报" :visible.sync="dialogPosterVisible" width="600px">
      <el-row class="dialog-poster-box" v-loading="isPosterLoading">
        <el-col :span="12">
          <p class="dialog-qrcode-img"><img :src="bookForm.qrcode" /></p>
          <p class="dialog-qrcode-text">听书二维码</p>
        </el-col>
        <el-col :span="12">
          <p class="dialog-poster-img"><img :src="bookForm.poster" /></p>
          <p class="dialog-poster-text">专属海报</p>
        </el-col>
        <el-col :span="24" class="foot-btns">
          <el-button type="cyan" @click="onDownQrcode"> 保存二维码 </el-button>
          <el-button type="cyan" @click="onDownPoster"> 保存海报 </el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </section>
</template>
<script>
  import Sticky from '@/components/Sticky' // 粘性header组件
  import editor from '@/components/Editor';
  import Canvas2Image from '@/utils/canvas2Image'
  import {getBookDetail,saveBook} from "../../api/book";
  import {getBookCategoryTreeList} from "../../api/bookCategory";
  import { getUploadFileRequest,getDownloadFileRequest, downLoadFileBase64 } from "../../api/index";

  export default {
    name:"bookDetail",
    components: { Sticky,editor },
    data() {
      return{
        // pageTitle: '新增图书',
        loading: false,
        params:{
          id:0,
          isDraft:0
        },
        bookForm: {
          id:null,
          title:'',
          author:'',
          recommendation:'',
          cover:null,
          isBanner:0,
          isDraft:1,
          bannerImage:null,
          content:'',
          isFree:1,
          price:0,
          categoryId:null,
          bookCategory:null,
          saleType:1,
          saleTime:'',
          isDistribute:1,
          publishDate:new Date(),
          qrcode:'',
          dataQrcode:'',
          poster:'',
          dataPoster:'',
        },
        isVoiceLoading:false,
        voiceList:[{ voiceType:1, voicePath:null },{ voiceType:2, voicePath:null },{ voiceType:3, voicePath:null }],
        voiceFileList:[{ visible:false,voiceType:1, name:'',progress:0 },{ visible:false,voiceType:2, name:'',progress:0 },{ visible:false,voiceType:3, name:'',progress:0 }],
        categoryList:[],
        categoryChildList:[],
        uploadAction:getUploadFileRequest(),
        uploadVoiceAction:getUploadFileRequest(),
        token:{'token':this.$store.state.token},
        dialogPosterVisible:false,//获取海报的弹窗
        isPosterLoading:false,
        posterBtnVisible:false,//一键获取海报二维码按钮显示开关
        draftBtnVisible:false,//草稿箱按钮显示开关
      }
    },
    watch:{
      'bookForm.title':function (value,oldValue) { this.checkValidators(); },
      'bookForm.author':function (value,oldValue) { this.checkValidators(); },
      'bookForm.recommendation':function (value,oldValue) { this.checkValidators(); },
      'bookForm.cover':function (value,oldValue) { this.checkValidators(); },
      'voiceList':{
        handler (value,oldValue) { this.checkValidators(); },
        deep: true
      },
      'bookForm.content':function (value,oldValue) { this.checkValidators(); },
      // 'bookForm.publishDate':function (value,oldValue) { this.checkValidators(); },
      'bookForm.bookCategory':function (value,oldValue) { this.checkValidators(); },
    },
    validators: {
      'bookForm.title': function(value) {
        return this.validator.value(value).required('请填写书名');
      },
      'bookForm.author': function(value) {
        return this.validator.value(value).required('请填写作者');
      },
      'bookForm.recommendation': function(value) {
        return this.validator.value(value).required('请填写推荐语').maxLength(100);
      },
      'bookForm.cover': function(value) {
        return this.validator.value(value).required('请上传封面');
      },
      'voiceList': function(value) {
        if(value.filter(m=>m.voicePath != null && m.voicePath != '').length>0){
          return this.validator.value("1").required();
        }
        return this.validator.value("").required('请上传音频文件');
      },
      'bookForm.content': function(value) {
        return this.validator.value(value).required('请填写内容介绍');
      },
      // 'bookForm.publishDate': function(value) {
      //   return this.validator.value(value).required('请填写出版时间');
      // },
      'bookForm.price,bookForm.isFree': function(value,isFree) {
        value = value == undefined ? '':value;
        console.log("isFree",value,isFree)
        if(isFree == 0) {
          return this.validator.value(value).required('请输入价格').greaterThan(0,'价格需大于零');
        }
        return this.validator.value("1").required();
      },
      'bookForm.bookCategory': function(value) {
        if(value == null) return this.validator.value("").required('请选择分类');
        else return this.validator.value("1").required();
      },
      'bookForm.saleTime,bookForm.saleType': function(value,type) {
        if(type == 2) {
          if(this.baseUtil.isBlankObj(value)) return this.validator.value(value).required('请选择上架时间');
          else{
            let val = new Date(value).getTime();
            if(val<=Date.now())
              return this.validator.value("").required('上架时间需大于当前时间');
          }
        }
        return this.validator.value("1").required();
      },
    },
    methods: {
      checkValidators(){
        this.posterBtnVisible = this.baseUtil.isNotBlank(this.bookForm.title) &&
          this.baseUtil.isNotBlank(this.bookForm.author) &&
          this.baseUtil.isNotBlank(this.bookForm.recommendation) &&
          this.baseUtil.isNotBlank(this.bookForm.cover) &&
          this.baseUtil.isNotBlankObj(this.voiceList[0].voicePath) &&
          this.baseUtil.isNotBlankObj(this.bookForm.bookCategory) &&
          this.baseUtil.isNotBlank(this.bookForm.content) ;
        this.draftBtnVisible = this.baseUtil.isNotBlank(this.bookForm.title) ||
          this.baseUtil.isNotBlank(this.bookForm.author) ||
          this.baseUtil.isNotBlank(this.bookForm.recommendation) ||
          this.baseUtil.isNotBlank(this.bookForm.cover) ||
          this.baseUtil.isNotBlankObj(this.voiceList[0].voicePath) ||
          this.baseUtil.isNotBlankObj(this.bookForm.bookCategory) ||
          this.baseUtil.isNotBlank(this.bookForm.content) ;
      },
      async getPrintCover(){
        if(this.baseUtil.isNotBlank(this.bookForm.cover)) {
          let result = this.bookForm.cover.split('/')
          let fileKey = result[3] + '/' + result[4] + '/' + result[5]
          let resp = await downLoadFileBase64(fileKey , Date.now() + ".jpg");
          this.bookForm.dataCover = resp.data;
        }
      },
      async getPrintQrcode(){
        if(this.baseUtil.isNotBlank(this.bookForm.qrcode)) {
          let result = this.bookForm.qrcode.split('/')
          let fileKey = result[3] + '/' + result[4] + '/' + result[5]
          let resp = await downLoadFileBase64(fileKey , Date.now() + ".jpg");
          this.bookForm.dataQrcode = resp.data;
        }
      },
      handleCoverSuccess(res, file) {
        this.bookForm.cover = res.data;
        this.getPrintCover();
      },
      async beforeCoverUpload(file) {
        let _this = this;
        return new Promise(async function (resolve, reject) {
          const isJPG = file.type === 'image/jpeg';
          const isPNG = file.type === 'image/png';
          const isLt500KB = file.size / 1024  < 500;
          if (!isJPG && !isPNG) {
            _this.$alert('图片格式错误,请检查后重新上传。',{type:'warning'});
            return reject();
          }
          if (!isLt500KB) {
            _this.$alert('图片大小不合适,请上传小于500KB的图片', {type: 'warning'});
            return reject()
          }
          // const isSize = await _this.checkSize(file,175,180,255,260);
          // if (!isSize) _this.$alert('图片尺寸不合适,请上传178*258的图片', {type: 'warning'});
          (isJPG||isPNG) && isLt500KB ?resolve():reject();
        }).then(() => { return Promise.resolve() },
          () => { return Promise.reject() })
      },
      checkSize(file,minW,maxW,minH,maxH){
        return new Promise(function(resolve, reject) {
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.onload = function() {
            let valid =  (minW<= img.width && img.width<=maxW) && (minH<= img.height && img.height<=maxH);
            valid ? resolve(true) : resolve(false);
          }
          img.src = _URL.createObjectURL(file);
        }).then((res) => { return res; });
      },
      handleBannerSuccess(res, file) {
        this.bookForm.isBanner = 1;
        this.bookForm.bannerImage = res.data;
      },
      beforeBannerUpload(file) {
        let _this = this;
        return new Promise(async function (resolve, reject) {
          const isJPG = file.type === 'image/jpeg';
          const isPNG = file.type === 'image/png';
          const isLt500KB = file.size / 1024  < 500;
          if (!isJPG && !isPNG) {
            _this.$alert('图片格式错误,请检查后重新上传。',{type:'warning'});
            return reject()
          }
          if (!isLt500KB) {
            _this.$alert('图片大小不合适,请上传小于500KB的图片', {type: 'warning'});
            return reject()
          }
          // const isSize = await _this.checkSize(file,642,646,258,262);
          // if (!isSize) _this.$alert('图片尺寸不合适,请上传178*258的图片', {type: 'warning'});
          (isJPG||isPNG) && isLt500KB ?resolve():reject();
        }).then(() => { return Promise.resolve() },
          () => { return Promise.reject() })
      },
      beforeVoiceUpload(file) {
        console.log("file.type",file.type);
        const isMP3 = file.type === 'audio/mp3'||file.type ===  'audio/mpeg';
        const isWMV = file.type === 'audio/wmv';
        const isLt10M = file.size / 1024 / 1024 <= 10;
        if (!isMP3 &&!isWMV) {
          this.$message.error('音频文件格式错误,请检查后重新上传。');
        }
        if (!isLt10M) {
          this.$message.error('音频文件大小不合适,请上传小于10MB的音频文件');
        }
        return (isMP3 || isWMV ) && isLt10M;
      },
      voiceDDBefore(file){
        let isOk = this.beforeVoiceUpload(file);
        if(isOk){
          this.voiceFileList[0].visible = true;
          this.voiceFileList[0].name = file.name;
          this.voiceFileList[0].progress = 0;
        }
        return isOk;
      },
      voiceJDBefore(file){
        let isOk = this.beforeVoiceUpload(file);
        if(isOk){
          this.voiceFileList[1].visible = true;
          this.voiceFileList[1].name = file.name;
          this.voiceFileList[1].progress = 0;
        }
        return isOk;
      },
      voiceQBBefore(file){
        let isOk = this.beforeVoiceUpload(file);
        if(isOk){
          this.voiceFileList[2].visible = true;
          this.voiceFileList[2].name = file.name;
          this.voiceFileList[2].progress = 0;
        }
        return isOk;
      },
      voiceDDSuccess(resp, file, fileList){
        this.voiceFileList[0].progress = 100;
        this.voiceList[0].voicePath = resp.data;
      },
      voiceJDSuccess(resp, file, fileList){
        this.voiceFileList[1].progress = 100;
        this.voiceList[1].voicePath = resp.data;
      },
      voiceQBSuccess(resp, file, fileList){
        this.voiceFileList[2].progress = 100;
        this.voiceList[2].voicePath = resp.data;
      },
      voiceProgress(event, file, fileList){
        let percent = event.percent;
        if(percent == 100) percent = 99;
        this.voiceFileList.map(m=>{
          if(m.name == file.name){
            m.progress = percent;
          }
        });
      },
      voiceRemove(voice,index){
        voice.visible = false;
        voice.name = '';
        voice.progress = 0;
        this.voiceList.map(m=>{if(m.voiceType == voice.voiceType) m.voicePath = null});
      },
      async onGetQrcodeAndPoster(){
        this.$validate().then(async function (success) {
          if(success){
            this.dialogPosterVisible = true;
            this.isPosterLoading = true;
            if(this.baseUtil.isBlankObj(this.bookForm.id)) {
              this.bookForm.isDraft = 1
              await this.handleSave(false, false);
              await this.getPrintQrcode();
            }
            this.$nextTick(async ()=>{
              const el = this.$refs.posterPrint;
              let width = el.offsetWidth;
              let height = el.offsetHeight;
              let canvas = document.createElement("canvas");
              let scale = 2;
              canvas.width = width * scale;
              canvas.height = height * scale;
              canvas.getContext("2d").scale(scale, scale);
              const options = {
                scale: scale,
                canvas: canvas,
                logging: true,
                width: width,
                height: height
              }
              let canvasOut = await this.$html2canvas(el, options);
              let poster = Canvas2Image.convertToJPEG(canvasOut, canvasOut.width, canvasOut.height);
              this.bookForm.dataPoster = poster.src;
              await this.handleSave(false, false,true);
              this.isPosterLoading = false;
            })
          }else  this.$message({ message: "请检查<必填项>是否都已填写完", type: 'warning' });
        }.bind(this));
      },
      onDownQrcode(){
        this.downLoad(this.bookForm.qrcode);
      },
      onDownPoster(){
        this.downLoad(this.bookForm.poster);
      },
      downLoad(url){
        let resut = url.split('/')
        let fileKey = resut[3]+'/'+resut[4]+'/'+resut[5]
        let href = getDownloadFileRequest() +'?fileKey='+fileKey+"&fileName="+Date.now()+".jpg";
        var link = document.createElement('a');
        link.href = href
        document.body.appendChild(link)
        link.click();
        window.URL.revokeObjectURL(link.href);
      },
      onCategoryClick(category){
        let isVisible = category.visible;
        this.categoryList.map(c=>c.visible = false);
        category.visible = !isVisible;
      },
      onCancel(){
        this.$store.dispatch('delCurrentViews',{
          view: this.$route,
          $router: this.$router
        });
        if(this.params.isDraft == 1) this.$router.push({ name:'DraftList' });
        else this.$router.push({ name:'BookList' });
      },
      onPublish(){
        this.$validate().then(async function (success) {
          if(success){
            this.loading = true;
            this.bookForm.isDraft = 0
            console.log("参数：",this.bookForm)
            await this.handleSave();
            this.loading = false;
          }else{
            this.$message({
              type:"warning",
              message:'有未填写内容'
            })
          }
        }.bind(this));
      },
      async onSaveDraft(){
        this.loading = true;
        this.bookForm.isDraft = 1;
        await this.handleSave();
        this.loading = false;
      },
      async handleSave(isAlert = true,isRedirect = true,isPoster = false) {
        let book = this.baseUtil.modelCopy(this.bookForm),
            voiceList = [];
        book.categoryId = this.baseUtil.isNotBlankObj(book.bookCategory)?book.bookCategory.id:null;
        this.voiceList.map(m=>{
          if(this.baseUtil.isNotBlank(m.voicePath)) voiceList.push(m)
        })
        let resp = await saveBook({book:book,voiceList:voiceList,isPoster:isPoster})
        if(this.qUtil.validResp(resp)) {
          //更新下model-->用于不跳转的情况
          this.params.id = this.bookForm.id = resp.data.id;
          if(isPoster) this.bookForm.poster = resp.data.poster
          this.bookForm.qrcode = resp.data.qrcode
          this.bookForm.publishingId = resp.data.publishingId
          if(isAlert) {
            this.$alert("保存成功", {
              callback: action => {
                this.$store.dispatch('delCurrentViews', {
                  view: this.$route,
                  $router: this.$router
                });
                if(isRedirect){
                  if (this.bookForm.isDraft == 1) this.$router.push({name: "DraftList", query: {isNew: this.bookForm.id}});
                  else this.$router.push({name: "BookList", query: {isNew: 1}});
                }
              }
            });
          }else{
            if(isRedirect){
              if (this.bookForm.isDraft == 1) this.$router.push({name: "DraftList", query: {isNew: this.bookForm.id}});
              else this.$router.push({name: "BookList", query: {isNew: 1}});
            }
          }
        }else this.$message({ message: resp.msg, type: 'warning' });
      },
      async loadData(){
        this.loading = true;
        let categoryResp = await  getBookCategoryTreeList()
        if(this.qUtil.validResp(categoryResp)){
          this.categoryList = categoryResp.data.dataList;
        }else this.$message({ message: categoryResp.msg, type: 'warning' });

        if(this.params.id > 0){
          let resp = await getBookDetail(this.params);
          if(this.qUtil.validResp(resp)){
            this.bookForm = resp.data.book;
            let voiceList = resp.data.voiceList;
            if(voiceList != null && voiceList.length>0){
              voiceList.map(v=>{
                if(v.voiceType==1) this.voiceList[0] = v;
                if(v.voiceType==2) this.voiceList[1] = v;
                if(v.voiceType==3) this.voiceList[2] = v;
              })
            }
            await this.getPrintCover();
            await this.getPrintQrcode();
          }else this.$message({ message: resp.msg, type: 'warning' });
        }
        this.loading = false;
      }
    },
    mounted() {
      this.params.id = this.$route.query.id || 0;
      this.params.isDraft = this.$route.query.draft || 0;
      this.loadData();
    }
  }
</script>
<style scoped>
  .poster-print-box{
  	width: 564px;
  	height: 738px;
  	overflow: hidden;
    position: absolute;
    top: 20px;
    right:-9999px;
    background:url(../../assets/images/popbg.jpg) no-repeat center top;
  }
  .poster-print-box .pop_intro{
    margin: 90px 40px 90px 50px;
    height: 150px;
    overflow: hidden;
    text-align: left;
    font-size: 18px;
    line-height: 2em;
    color: #333;
  }
  .poster-print-box .pop_img{
  	margin:0px 40px 0 60px;
  	height: auto;
  	overflow: hidden;
  	text-align: left;
  	padding:10px;
  }
  .poster-print-box .pop_img img{
  	width: 150px;
  	height: 220px;
  	float: left;
  	display: block;
  	box-shadow:0px 2px 6px rgba(0,0,0,0.3);
  }
  .poster-print-box .pop_img div{
  	margin-left: 180px;
  	font-size: 20px;
  	color: #000;
  	font-weight: bold;
  	position: relative;
  	border-bottom:15px #2BB89A solid;
  	padding: 0 5px;
  	margin-top: 70px;
  }
  .poster-print-box .pop_img div span{
  	position: relative;
  	bottom: -10px;
  	line-height: 1.5em;
  }
  .poster-print-box .pop_qrcode{
  	margin: 32px 46px;
  	text-align: right;
  }
  .poster-print-box .pop_qrcode img{
  	width: 100px;
  	height: 100px;
  	display:block;
  	float: right;
  }
  .cover-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
    width:100px;
    height:145px;
    line-height: 20px;
  }
  .el-upload {
  	position: relative;
  }
  .el-upload .upload_modify{
  	position:absolute;
  	bottom: 0;
  	left: 0;
  	display:block;
  	width: 100%;
  	text-align: center;
  	line-height:1.8;
  	color: #fff;
  	font-size: 14px;
  	padding: 0;
  	margin: 0;
  	background:rgba(0,0,0,0.5);
  }
  .cover-uploader .cover-uploader-icon {
    margin:30px auto 0 auto;
    font-size: 30px;
    color: #8c939d;
    text-align: center;
  }
  .cover-uploader .cover-image {
    width:100px;
    height:145px;
    display: block;
  }
  .banner-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
    width:500px;
    height:201px;
  }
  .banner-uploader .banner-uploader-icon {
    margin:50px auto 0 auto;
    font-size: 50px;
    color: #8c939d;
    text-align: center;
  }
  .banner-uploader .banner-image {
    width: 500px;
    height: 200px;
    display: block;
  }
  .voice-uploader{
    display: inline-block;
    margin-right:15px;
    /*background-color: #BDBEBE;*/
    /*padding:0 10px;*/
    /*border-radius: 4px;*/
  }
  .voice-uploader:hover,.voice-uploader.is-active{
    /*background-color: #2BB89A;
    color:#fff;*/
  }
  .voice-upload-list{

  }
  .voice-upload-list span{
    display: inline-block;
  }
  .voice-upload-list span.fileProgress{
    width:200px;
  }
  .voice-upload-list span.fileDel i{
    cursor: pointer;
  }
  .voice-upload-list span.fileDel i:hover{
    background-color: #e2e2e2;
    border-radius:100%;
  }
  .select-category-list .category-item{
    margin:0 20px 10px 0;
  }
  .select-category-list .category-item.is-active{
    color:#2BB89A;
    border:1px solid #2BB89A;
  }
  .sub-category-group .sub-category-item{
    margin:5px;
    background-color: #C3F2EA;
  }
  .selected-category{
    display: inline-block;
    border:1px solid #2BB89A;
    color: #2BB89A;
    padding:0 15px;
    border-radius:4px;
    cursor: pointer;
    background:url('../../assets/images/selected.png') no-repeat bottom right;
  }
  .poster-print-btn__wrapper{
    position: absolute;
    top:660px;
    left:20px;
    width:140px;
    height:140px;
    border-radius: 100%;
    background-color: #D9F2ED;
    padding:10px;
  }

  .poster-print-btn__body{
    padding:10px;
    width:120px;
    height:120px;
    border-radius: 100%;
    background-color: #80D4C3;
  }

  .poster-print-btn{
    width:100px;
    height:100px;
    border-radius: 100%;
    background-color: #2BB89A;
    color:#fff;
    line-height: 20px;
    font-size:14px;
    text-align: center;
  }
  .poster-print-btn__wrapper:hover{
    background-color: #80D4C3;
  }
 .poster-print-btn__wrapper:hover .poster-print-btn__body{
    background-color: #2BB89A;
  }
  .poster-print-btn__wrapper:hover .poster-print-btn{
    background-color: #1c957b;
  }
  .dialog-poster-box{
    text-align: center;
  }
  .dialog-poster-box .dialog-qrcode-img,.dialog-poster-box .dialog-poster-img{
    height:226px;
  }
  .dialog-poster-box .dialog-qrcode-img img{
    margin-top:30px;
    width:162px;
    height:162px;
    padding:1px;
    border:1px solid #f2f2f2;
  }
  .dialog-poster-box .dialog-poster-img img{
    width:168px;
    height:220px;
    padding:1px;
    border:1px solid #f2f2f2;
  }
  .dialog-poster-box .foot-btns{
    margin-top:20px;
  }
</style>
<style>
  .sub-category-group .sub-category-item .el-radio-button__inner{
    border:1px solid #dcdfe6;
    border-radius:4px !important;
    background-color: #D9F2ED;
  }
  .sub-category-group .is-active .el-radio-button__inner,.sub-category-group :checked+ .el-radio-button__inner{
    color:#fff;
    background-color: #01B891;
    box-shadow:none;
  }
  .voice-uploader .el-button--text{
    color:#fff;
  }
  .el-loading-mask{
    z-index:3000;
  }
</style>
